<template>
  <div class="lx">
    <main class="animated bounceInRight">
      <div class="cent">联系</div>
      <img
        src="../../public/image/testimonial-bg.jpg"
        alt="玫瑰"
        width="100%"
         height="290px"
        class="lbt"
      />
    </main>
    <div class="container animated bounceInLeft">
      <div class="box">
        <div class="top">
          <h1>获取办公室信息</h1>
          <p>
            动力学过程的变化
            每粒海藻和金丝雀动物的泥南，印度菊科植物，乌拉梅草，南美白蚁
          </p>
        </div>
        <div class="san-box">
          <div>
            <p><i class="iconfont icon-zuoji1 lx-icon"></i></p>
            <p>地址</p>
            美国纽约州第五街666号
          </div>
          <div>
            <p><i class="iconfont icon-zuoji lx-icon"></i></p>
            <p>电话号码</p>
            <p>+88716-298-1822</p>
            <p>+88716-298-1822</p>
          </div>
          <div>
            <p><i class="iconfont icon-xinxi lx-icon"></i></p>
            <p>电子邮件地址</p>
            <p>info@example.com</p>
            <p>info@kngu.com</p>
          </div>
        </div>
        <div class="footerr">
          <form action="" method="post">
            <input type="text" placeholder="名称" name="" class="mc" />
            <input type="email" placeholder="电子邮件" name="" class="mc" />
            <input type="tetx" placeholder="学科" name="" class="xk mc" />
            <textarea
              name=""
              id=""
              cols="30"
              rows="10"
              placeholder="信息"
              class="xx mc"
            ></textarea>
            <div class="lx-tj"><button class="lx-btn">提交</button></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
h1 {
  text-align: center;
}
main {
  position: relative;
  .cent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #222222;
    font-size: 42px;
    font-family: "Lora", serif;
    z-index: 30;
  }
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  height: 1000px;
  padding: 90px 0 100px 0;
  .top {
    height: 240px;
    p {
      text-align: center;
    }
  }
  .san-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    div{
      .lx-icon{
        font-size: 30px;
        color: #222222;
        margin-bottom: 25px;
        text-align: center;
      }
      p{
         text-align: center;
      }
    }
  }
  .footerr {
    height: 446px;
    font-size: 16px;
    padding: 80px 0 0;
    .mc {
      width: 48%;
      margin: 15px 0 0 1%;
      outline: none;
      background: #ffffff;
      padding: 0 15px;
      height: 40px;
      border: 1px solid #e5e5e5;
      font-size: 14px;
      font-weight: 400;
      color: #222222;
    }
    .xk {
      width: 97%;
      display: block;
    }
    .xx {
      display: block;
      height: 180px;
      width: 97%;
    }
    .lx-tj {
      display: flex;
      justify-content: center;
      margin-top: 15px;
      .lx-btn {
        display: flex;
        justify-content: center;
        font-size: 14px;
        padding: 0 35px;
        font-weight: 400;
        height: 40px;
        line-height: 38px;
        background-color: #343a40;
        border-color: #343a40;
        color: #ffffff;
      }
    }
  }
}
</style>